<template>
  <div>
    <van-nav-bar
      title="人物信息"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
      class="van-hairline--surround"
    />
    <van-form @submit="onSubmit" v-show="is_show_form">
      <van-cell-group inset>
        <van-field
          v-model="data.name"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="data.zhiye"
          label="职业"
          is-link
          readonly
          placeholder="职业"
          @click="show_zhiye = true"
        />
        <van-action-sheet
          :show="show_zhiye"
          :round="false"
          :actions="zhiyes"
          @select="onSelect"
        />

        <van-field
          v-model="data.nums_type"
          is-link
          readonly
          name="加点类型"
          label="加点类型"
          placeholder="加点类型"
          @click="show_attr_type = true"
          :rules="[{ required: true, message: '请选择加点类型' }]"
        />
        <van-action-sheet
          :show="show_attr_type"
          :round="false"
          :actions="jds"
          @select="Attr_onSelect"
        />

        <van-field
          v-model="data.chenghao"
          is-link
          readonly
          name="称号"
          label="称号"
          placeholder="称号"
          @click="ch_click"
          :rules="[{ required: true, message: '请选择称号' }]"
        />
        <van-action-sheet
          :show="show_ch_type"
          :round="false"
          :actions="chs"
          @select="CH_onSelect"
        />

        <van-field
          v-model="data.nums"
          name="属性点"
          label="属性点"
          placeholder="属性点"
          :rules="[{ pattern, required: true, message: '请检查填写' }]"
        />

        <van-field
          v-model="data.nums_bf"
          name="宝石附魔"
          label="宝石附魔属性点"
          placeholder="宝石附魔属性点"
          :rules="[{ pattern, required: true, message: '请检查填写' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, ActionSheet, NavBar, Toast } from 'vant'
import { ref } from 'vue'
import axios from 'axios'
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [ActionSheet.name]: ActionSheet,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
  },
  setup() {
    // 显示职业下拉框
    const show_zhiye = ref(false)
    // 显示加点方向下拉框
    const show_attr_type = ref(false)
    // 显示称号下拉框
    const show_ch_type = ref(false)
    // 显示整个form表单
    const is_show_form = ref(false)

    // 选中的职业
    const selected_zy = ''
    // 选中的加点方向
    const selected_attr = ''
    // 职业类型
    const zhiyes = []
    // 加点类型列表
    const jds = []
    // 称号列表
    const chs = []
    // 返回上一页
    const onClickLeft = () => history.back()
    const pattern = /^[1-9][0-9]*([.][0-9]+)?$/
    return {
      show_zhiye,
      show_ch_type,
      selected_zy,
      zhiyes,
      pattern,
      onClickLeft,
      is_show_form,
      selected_attr,
      show_attr_type,
      jds,
      chs,
    }
  },
  data() {
    return {
      data: {},
    }
  },
  methods: {
    onSubmit: function () {
      this.save_user()
    },

    // 加点类型点击下拉选中
    Attr_onSelect(item) {
      this.show_attr_type = false
      this.selected_attr = item
      this.data.nums_type = item.name
      console.log(item.name)
    },
    CH_onSelect(item) {
      this.show_ch_type = false
      this.data.chenghao = item.name
      axios({
        method: 'post',
        url: '/apis/chs/',
        data: { pk: item.pk },
      }).then((res) => {
        if (res.data.code == 200) {
          Toast('提交成功')
          // history.back()
        }
      })
    },
    onSelect(item) {
      this.show_zhiye = false
      this.selected_zy = item
      this.data.zhiye = item.name
    },
    get_zy_type() {
      axios.get('/apis/zyjd_types/').then((res) => {
        this.zhiyes = res.data.zhiyes
        this.jds = res.data.jds
      })
    },
    get_user() {
      axios.get('/apis/user_info/').then((rsp) => {
        this.data = rsp.data.data
        this.is_show_form = true
      })
    },
    ch_click() {
      axios.get('/apis/chs/').then((rsp) => {
        this.chs = rsp.data.data
        console.log(this.chs)
        this.show_ch_type = true
      })
    },
    save_user() {
      var postdata = {
        name: this.data.name,
        zhiye: this.selected_zy ? this.selected_zy.value : this.data.zhiye,
        nums_type: this.selected_attr
          ? this.selected_attr.value
          : this.data.nums_type,
        nums: this.data.nums,
        nums_bf: this.data.nums_bf,
      }

      axios({
        method: 'post',
        url: '/apis/user_info/',
        data: postdata,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast('提交成功')
          history.back()
        }
      })
    },
  },
  mounted() {
    this.get_zy_type()
    this.get_user()
  },
}
</script>

<style lang="scss" scoped></style>
